<template>
  <div id="gameContainer" class="webgl-content" />
</template>

<script>
let isCanvasForce = false
export default {
  name: 'Webgl',
  data() {
    return {
      gameReady: false,
      dialogVisible1: false
    }
  },
  mounted() {
    // eslint-disable-next-line no-undef
    window.webglInstance = UnityLoader.instantiate('gameContainer', `${process.env.VUE_APP_WEBGL_BASE_URL}/Build/rikaze_webgl.json`, { onProgress: this.onProgress })
    document.addEventListener('click', (e) => {
      if (e.target.id === '#canvas') {
        // Clicked on canvas
        if (!isCanvasForce) {
          this.focusCanvas('true')
        }
      } else {
        // Clicked outside of canvas
        if (isCanvasForce) {
          this.focusCanvas('false')
        }
      }
    })
  },
  methods: {
    onProgress: (gameInstance, progress) => {
      if (!gameInstance.Module) {
        return
      }
      if (!gameInstance.logo) {
        gameInstance.logo = document.createElement('div')
        gameInstance.logo.className = 'logo ' + gameInstance.Module.splashScreenStyle
        gameInstance.container.appendChild(gameInstance.logo)
      }
      if (!gameInstance.progress) {
        gameInstance.progress = document.createElement('div')
        gameInstance.progress.className = 'progress ' + gameInstance.Module.splashScreenStyle
        gameInstance.progress.empty = document.createElement('div')
        gameInstance.progress.empty.className = 'empty'
        gameInstance.progress.appendChild(gameInstance.progress.empty)
        gameInstance.progress.full = document.createElement('div')
        gameInstance.progress.full.className = 'full'
        gameInstance.progress.appendChild(gameInstance.progress.full)
        gameInstance.container.appendChild(gameInstance.progress)
        console.log('progress ' + gameInstance.Module.splashScreenStyle)
      }
      gameInstance.progress.full.style.width = (100 * progress) + '%'
      gameInstance.progress.empty.style.width = (100 * (1 - progress)) + '%'
      // eslint-disable-next-line eqeqeq
      if (progress === 1) {
        gameInstance.logo.style.display = gameInstance.progress.style.display = 'none'
        isCanvasForce = true
        // this.$store.dispatch("")
      }
    },
    focusCanvas: (str) => {
      isCanvasForce = !isCanvasForce
      window.webglInstance.SendMessage('WebScript', 'SwitchFocus', str)
    }

  }
}
</script>

<style lang="scss" scoped>

  .webgl-content {
    width: 100%;
    height: 100%;
  }
</style>
